<!-- src/components/Sidebar.vue -->
<template>
  <div class="sidebar">
    <div class="logo-container">
      <img src="@/assets/logo.png" alt="盒游纪" class="logo-img" />
      <div class="logo-text" v-if="!collapse">盒游纪</div>
    </div>
    <!--    :default-active="$route.path"          &lt;!&ndash; 默认激活的菜单项，根据当前路由路径确定 &ndash;&gt;
        background-color="#304156"             &lt;!&ndash; 菜单背景颜色 &ndash;&gt;
        text-color="#bfcbd9"                   &lt;!&ndash; 菜单文字颜色 &ndash;&gt;
        active-text-color="#fff"               &lt;!&ndash; 激活菜单项的文字颜色 &ndash;&gt;
        :collapse="collapse"                   &lt;!&ndash; 控制菜单是否折叠 &ndash;&gt;
        :collapse-transition="false"           &lt;!&ndash; 是否使用折叠动画 &ndash;&gt;
        router                                 &lt;!&ndash; 启用 Vue Router 模式，index 作为路由路径 &ndash;&gt;
        -->
    <el-menu
        :default-active="$route.path"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#fff"
        :collapse="collapse"
        :collapse-transition="false"
        router
    >
      <el-menu-item index="/main/dashboard">
        <el-icon><House /></el-icon>
        <span>控制台</span>
      </el-menu-item>
      <el-sub-menu index="system" v-if="isSuperAdmin">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>系统管理</span>
        </template>
        <!-- 该功能为超管拥有的功能,普通管理只能看,进入页面带身份标识，是超管将删除按钮展示否则隐藏 -->
        <el-menu-item index="/main/admin">管理员管理</el-menu-item>

        <!-- 官方的公告管理，包含添加，删除，编辑，发布比如封号操作 -->
        <el-menu-item index="/main/announcement">公告管理</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/main/user">
        <el-icon><Document /></el-icon>
        <!-- 显示用户 ID、昵称、注册时间、状态（正常 / 禁言/封禁），仅支持对状态的修改 -->
        <span>用户管理</span>
      </el-menu-item>
      <el-sub-menu index="posts">
        <template #title>
          <el-icon><Goods /></el-icon>
          <span>帖子管理</span>
        </template>
        <el-menu-item index="/main/posts/review">审核管理</el-menu-item>
        <el-menu-item index="/main/posts/manage">帖子管理</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/tags">
        <el-icon><Flag /></el-icon>
        <span>标签管理</span>
      </el-menu-item>
      <el-menu-item index="/games">
        <el-icon><SwitchFilled /></el-icon>
        <span>游戏库</span>
      </el-menu-item>
      <!-- 用户评论可以直接发，但想要做敏感词过滤 -->
      <el-menu-item index="/main/comments">
        <el-icon><Document /></el-icon>
        <!-- 管理用户评论，对内容支持模糊搜索，无添加，修改，有删除 -->
        <span>评论管理</span>
      </el-menu-item>
      <el-menu-item index="/main/logs">
        <el-icon><Setting /></el-icon>
        <span>日志操作</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  House,
  Management,
  Goods,
  Document,
  Setting, Star, Flag, Switch, StarFilled, SwitchFilled
} from '@element-plus/icons-vue'
import { getCurrentUser } from '@/api/admin'

// 控制菜单折叠状态
const collapse = ref(false)

// 当前用户信息
const currentUser = ref<any>(null)

// 权限控制
const isSuperAdmin = computed(() => {
  return currentUser.value?.admin_role === 2; // 2表示超级管理员
})

// 获取当前用户信息
const loadCurrentUser = async () => {
  try {
    const response = await getCurrentUser();
    console.log(response)
    if (response.code === 200) {
      currentUser.value = response.data;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

// 页面初始化
onMounted(async () => {
  await loadCurrentUser();
})
</script>

<style scoped>
.sidebar {
  height: calc(100vh - 60px);
}
.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.el-menu {
  border-right: none;
}
</style>
